import 'package:abc/view/GradientButton.dart';
import 'package:flutter/material.dart';

// 定义按钮回调的类型别名
typedef ButtonCallback = void Function()?;

class CoinUnlockSheet extends StatelessWidget {
  // --- 数据参数 ---
  final int costCoin; // 需支付金币数 (原价)
  final int currentBalance; // 当前金币余额

  // --- 回调参数 ---
  final ButtonCallback? onGoRecharge;
  final ButtonCallback? onPayCoin;

  const CoinUnlockSheet({
    Key? key,
    required this.costCoin,
    required this.currentBalance,
    this.onGoRecharge,
    this.onPayCoin,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: MediaQuery.of(context).viewInsets, // 解决键盘遮挡问题
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            // --- 顶部标题和关闭按钮 ---
            _buildHeader(context),
            const SizedBox(height: 20),
            // --- 中间内容区 ---
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text(
                    '当前章节需支付金币解锁查看',
                    style: TextStyle(
                      fontSize: 15,
                      color: Color(0xFF3A3A3A),
                      fontWeight: FontWeight.w400,
                      height: 1,
                    ),
                  ),
                  const SizedBox(height: 20),
                  // 金币标签 (原价 和 会员价)
                  _buildCoinTag(
                        '解锁',
                        '$costCoin',
                        Color(0xFF8464F9),
                        Color(0xFFDEDBFF),
                        Color(0xFF8464F9),
                      ),
                  const SizedBox(height: 30),
                  // 金币余额和去充值按钮
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '金币余额 $currentBalance',
                        style: const TextStyle(
                          fontSize: 15,
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                          height: 1,
                        ),
                      ),
                      ElevatedButton(
                        onPressed: onGoRecharge,
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFFDEDBFF),
                          foregroundColor: const Color(0xFF8464F9),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                          padding: const EdgeInsets.all(12),
                          elevation: 0,
                        ),
                        child: const Text(
                          '去充值',
                          style: TextStyle(fontSize: 14),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 70),
                  // 支付金币按钮
                  GradientButton(
                    text: '支付${costCoin}金币',
                    margin: EdgeInsetsGeometry.all(0),
                    gradientColors: [Color(0xFFFFDB83), Color(0xFFFFA335)],

                    onPressed: onPayCoin,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 18),
          ],
        ),
      ),
    );
  }

  // 顶部标题和关闭按钮
  Widget _buildHeader(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB( 16, 16, 16, 0),
      child: Stack(
        alignment: Alignment.center,
        children: [
          const Positioned(
            child: Padding(
              padding: EdgeInsetsGeometry.only(top: 8),
              child: Text(
                '提示',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                  height: 1,
                ),
              ),
            ),
          ),

          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              InkWell(
                child: Image.asset(
                  'assets/images/ic_close.png',
                  width: 18,
                  height: 18,
                ),
                onTap: () => Navigator.of(context).pop(),
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 金币标签样式 (原价/会员价)
  Widget _buildCoinTag(
    String label,
    String value,
    Color bordercolor,
    Color bgcolor,
    Color textcolor,
  ) {
    return Container(
      height: 30,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: bordercolor, width: 1),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 30,
            padding: EdgeInsets.symmetric(horizontal: 3),
            alignment: Alignment.center,

            decoration: BoxDecoration(
              color: bgcolor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(5),
                bottomLeft: Radius.circular(5),
                topRight: Radius.zero,
                bottomRight: Radius.zero,
              ),
            ),
            child: Text(
              label,
              style: TextStyle(
                fontSize: 13,
                color: Color(0xFF333333),
                fontWeight: FontWeight.w400,
              ),
            ),
          ),
          const SizedBox(width: 4),
          Text(
            value,
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.bold,
              color: textcolor,
            ),
          ),
          Text(
            '金币',
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: const Color(0xFF3A3A3A),
            ),
          ),
          const SizedBox(width: 4),
        ],
      ),
    );
  }

}
